<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { updateUserPwdService } from '@/api/user.js'
import { useRouter } from 'vue-router'
import useUserInfoStore from '@/stores/userInfo.js'
import useTokenStore from '@/stores/token.js'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()
const userPwd = ref({
    "old_pwd": '',
    "new_pwd": '',
    "re_pwd": ''
})
const rules = {
    //输入的新密码必须满足5到16个连续非空白字符的字符串
    old_pwd: [
        { required: true, message: '请输入原密码', trigger: 'blur' },
        {
            pattern: /^\S{5,10}$/,
            message: '密码必须是5到16个连续非空白字符的字符串!',
            trigger: 'blur'
        }
    ],
    new_pwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        {
            pattern: /^\S{5,10}$/,
            message: '密码必须是5到16个连续非空白字符的字符串!',
            trigger: 'blur'
        }
    ],
    re_pwd: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
            pattern: /^\S{5,10}$/,
            message: '密码必须是5到16个连续非空白字符的字符串!',
            trigger: 'blur'
        }
    ]
}
// 用于清除表单数据
const clearForm = () => {
    userPwd.value.old_pwd = '';
    userPwd.value.new_pwd = '';
    userPwd.value.re_pwd = '';
}

//重置密码
const updateUserPwd = async () => {
    // 获取 userId
    const userId = userInfoStore.info.userId
    //确保旧密码与新密码不一样
    if (userPwd.value.old_pwd === userPwd.value.new_pwd || userPwd.value.old_pwd === userPwd.value.re_pwd) {
        ElMessage.error('旧密码与新密码不能一样！');
        return clearForm()
    }
    // 确保新密码和确认密码一致
    if (userPwd.value.new_pwd !== userPwd.value.re_pwd) {
        ElMessage.error('新密码和确认密码不一致！');
        return clearForm()
    }
    const userPwdData = {
        old_pwd: userPwd.value.old_pwd,
        new_pwd: userPwd.value.new_pwd,
        re_pwd: userPwd.value.re_pwd,
        user_id: userId
    }
    if (userId) {
        try {
            let result = await updateUserPwdService(userPwdData);
            if (result.code === 200) {
                ElMessage.success('密码重置成功,请重新登录!');
                // 清空pinia中存储的token及个人信息
                tokenStore.removeToken();
                tokenStore.removeUserAccount();
                userInfoStore.removeInfo();
                // 退出后跳转至登录页面
                router.push('/login');
            } else {
                ElMessage.error('服务异常!');
                clearForm()
            }
        } catch (error) {
            clearForm()
        }
    } else {
        ElMessage.error('用户错误！');
        clearForm()
    }
}
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>重置密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="userPwd" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="原密码" prop="old_pwd">
                        <el-input type="password" v-model="userPwd.old_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="new_pwd">
                        <el-input type="password" v-model="userPwd.new_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="re_pwd">
                        <el-input type="password" v-model="userPwd.re_pwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updateUserPwd">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>